
<div class="layui-fluid">
    <div class="layui-row">
      <div class="layui-col-xs12">
        <div class="layui-card">
          <div class="layui-card-header">
            文章：
            
          </div>
          

          <div class="layui-card-body">

            
              <div class="panel panel-default">
                  <!-- Default panel contents -->
                  <div class="panel-heading bg-primary" style="color:red ;">
                        MARKDOWN
                
                        <!-- onclick="addmdjump()" -->
                        <!-- <button id="addmd" class="btn btn-primary " style="float:right;margin: 0 0;"  >
                            
                        </button> -->

                        <div style="float:right; margin-right: 10px">
                            <span class="glyphicon glyphicon-pencil" style="color:red; font-size:20px"></span>
                            <a href="#/layui/code"> 添加文章 </a>  
                        </div>  

                  </div>
                
                  <div id="mdtable">

                  <!-- Table -->
                  <table  class="table " style="margin-top:10px;">
                    <!-- <input v-model="blogtitle">
                    <span> {{ blogtitle }} </span> -->
                   <thead >
                      <tr class="success">
                          <th width="5%" style="text-align:center;">序号</th>
                          <th width="20%" style="text-align:center;">标题</th>
                          <th width="40%" style="text-align:center;">描述</th>
                          <th width="20%" style="text-align:center;">时间</th>
                          <th width="15%" style="text-align:center;">操作</th>
                      </tr>
                      </thead>
                      <tbody  v-for="article in articles">
                            <tr >
                                <td style="text-align:center;" > {{ article.id }} </td>
                                <td id="blogtitletd" style="text-align:center;"> {{ article.blogtitle }}  </td>
                                <td style="text-align:center;"> {{ article.markdowninfo }} </td>
                                <td style="text-align:center;"> {{ article.writetime }} </td>
                                <td style="text-align:center;">
                                <div class="btn-group flex-btn-group-container"> 
                                    <button id="viewbutton" class="btn btn-info btn-sm" @click="jumpreadmd(article.blogtitle)">
                                        查看
                                    </button>
                                    <button class="btn btn-primary btn-sm" @click="editormd(article.blogtitle)">
                                        编辑
                                    </button>
                                    <button class="btn btn-danger btn-sm"  @click="deletemd(article.blogtitle)">
                                        删除
                                    </button>
                                </div>
                                </td>
                            </tr>
                                  
                        </tbody>
                            
                    </table>
                    
                    </div>
                </div>
                
               
                
           
          </div>

        </div>
      </div>
    </div>
  </div>
  
  <div id="mdadd" style="display:none" >
    <!-- style="width:100%;" -->
        <!-- <input v-model="blogtitle">
        <span> {{ blogtitle }} </span>
        
        <textarea v-model="blogtitle"></textarea> -->

        <div class="row " >


            <div class="col-lg-6" style="width:50%;float: left;">
            <div class="input-group">
                <span class="input-group-btn">
                <button class="btn btn-default btn-primary" type="button">标题</button>
                </span>
                <input type="text" class="form-control" v-model="blogtitle" >
            </div>
            </div>

            <div class="col-lg-6" style="width:50%;float: left;">
            <div class="input-group">
                <span class="input-group-btn">
                <button class="btn btn-default btn-primary" type="button">描述</button>
                </span>
                <input type="text" class="form-control" v-model="markdowninfo" >
            </div>
            </div>

            <div class="col-lg-6" style="width:45%;float: left;margin-top: 20px;">
                    <div class="input-group">
                    <span class="input-group-btn">
                        <button class="btn btn-default btn-primary" type="button">分类</button>
                    </span>
                    <input type="text" class="form-control" v-model="catogery" >
                    </div>
                </div>

            <div class="col-lg-6" style="width:55%;float: left; margin-top: 20px;">
                <div class="input-group">
                <span class="input-group-btn">
                    <button class="btn btn-default btn-primary" type="button">时间</button>
                </span>
                <input type="datetime-local" class="form-control" v-model="writetime" >
                </div>
            </div>

            <div class="col-lg-6" style="width:99%;float: left;margin-top: 20px;">
                <div class="input-group">
                <span class="input-group-btn">
                    <button class="btn btn-default btn-primary" type="button">内容</button>
                </span>
                <input type="text" class="form-control"  v-model="mdContent" >
                </div>
            </div>

        </div>
        
    </div >
    

<script>

var urlread = "http://139.199.89.116:8080/md/getnewmd";

$.ajax({
    url:urlread,
    type:'GET',
    dataType:'json',
    contentType:'application/json; charset=UTF-8',
    success:function (data) {
        mdvue.articles = data;
    },
    error: function() {
        console.log("xsss");
    }

});

var mdvue = new Vue({

    el:'#mdtable',
    data: {
        articles: [
            {id:"23",blogtitle:"asds",writetime:"",markdowninfo:""},
            {id:"234",blogtitle:"区块链",writetime:"",markdowninfo:""},
        ],
        da:"cvxvxcvx",
        blogtitle:"asds",
        writetime:"",
        markdowninfo:"",
    },
    methods:{
        
        jumpreadmd: function(blogtitle) {
            localStorage.setItem("blogtitle",blogtitle);
            window.open("../html/read.html");
            // window.location.href="../html/blogread.html";

        },
        
        editormd: function(blogtitle) {
            alert(blogtitle);
        },

        deletemd: function(blogtitle) {
            alert("删除" + blogtitle + "? 暂时不删除");
        }
    }

});

var addmdvue = new Vue({
    el:'#mdadd',
    data: {
        blogtitle:"ssss",
        markdowninfo:"",
        catogery:"",
        writetime:"",
        mdContent:"",
    },
    
});

function addmdjump() {
    window.open("#/layui/code");
}

// 暂时不用这个
function addmd() {

    var s = $('#mdadd').html();
    // var article = {blogtitle:"",writetime:"",markdowninfo:"",markdownstring:""};
    

    // alert(s);
    layer.open({
        title:"添加文章",
        btn: ['确定', '取消'],
        area: ['575px', '350px'], //宽高
        content: s,
        
        btn1: function() {

            console.log(addmdvue.blogtitle);

            var urlread = "http://139.199.89.116:8080/md/uploadmd";

            // $.ajax({
            //     url:urlread,
            //     type:'GET',
            //     dataType:'json',
            //     data:{markdown:addmdvue.article},
            //     contentType:'application/json; charset=UTF-8',
            //     success:function (data) {
            //         mdvue.articles = data;
            //         // console.log("dfsdfs");
            //         // console.log(mdvue.articles);
            //     },
            //     error: function() {
            //         console.log("xsss");
            //     }

            // });

            layer.msg("添加成功");
            // location.reload();
        },
        btn2: function() {

        }
    })
}

</script>
